<template>
  <div style="position:relative;">
    <!-- 头部返回按钮 -->
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="返回"
      @back="() => {this.$router.go(-1)}"
    />
    <div class="org-info flex">
      <div class="flex">
        <!-- <a-avatar shape="square" :size="100" :src="require('@/assets/images/头像.png')" /> -->
        <ImageVue :width="'130px'" :cover="orgDetail.cover" />
        <div class="info flex">
          <div class="top flex">
            <span class="name">{{ orgDetail.name }}</span>
            <div class="type">{{ orgDetail.typeName }}培训</div>
          </div>
          <div class="intro">{{ orgDetail.intro }}</div>
          <div class="phone">联系我们：{{ orgDetail.contact }}</div>
        </div>
      </div>
      <div class="operation">
        <img
          v-if="orgDetail.remark == 1"
          @click="canCollect(0,orgDetail)"
          class="comment"
          style="top:0;"
          src="@/assets/images/已收藏.png"
          alt
        />
        <img
          v-else
          @click="collect(0,orgDetail)"
          class="comment"
          style="top:0;"
          src="@/assets/images/收藏.png"
          alt
        />
        <img class="comment" src="@/assets/images/评价.png" @click="openDrawer(0,orgDetail.id)" alt />
      </div>
    </div>

    <a-page-header title="TA的团队" />
    <div class="list-box">
      <div class="list flex" v-for="(item,index) in lecturerList" :key="item.id">
        <ImageVue :width="'120px'" :height="'120px'" :cover="item.cover" />
        <div class="center flex">
          <span>{{ item.name }}</span>
          <span>简介：</span>

          <a-popover title="简介" :overlayStyle="{width:'300px','word-break':'break-all'}">
            <template #content>
              <p>{{ item.intro }}</p>
            </template>
            <div class="jianjie">{{ item.intro }}</div>
          </a-popover>
          <div class="flex" style="align-items:center;">
            <span>课程：</span>
            <template v-if="item.courseList && item.courseList.length > 0">
              <span
                class="flex item"
                @click="getCourseById(item.courseList[0].id)"
              >{{ item.courseList[0].name }}</span>
              <span
                v-if="item.courseList.length > 1"
                @click="openCourseListModal(item.courseList)"
                class="flex item"
              >更多</span>
            </template>
            <span v-else class="flex item">暂无授课</span>
          </div>
        </div>
        <div class="operation right">
          <img
            v-if="item.remark == 1"
            @click="canCollect(2,item,index)"
            class="comment"
            style="top:10px;"
            src="@/assets/images/已收藏.png"
            alt
          />
          <img v-else class="comment" @click="collect(2,item,index)" style="top:10px;" src="@/assets/images/收藏.png" alt />
          <img class="comment" src="@/assets/images/评价.png" @click="openDrawer(1,item.id)" alt />
        </div>
      </div>
    </div>
    <Pagination
      style="bottom: -60px;"
      :params="lecturerParmas"
      :total="lectureTotal"
      @method="getlecturerList"
    />

    <a-drawer
      id="drawer"
      title="评价"
      placement="right"
      width="400"
      @close="visible = false"
      :closable="true"
      :visible="visible"
      v-loading="drawerLoading"
      :zIndex="1002"
      :after-visible-change="afterVisibleChange"
    >
      <a-comment>
        <!-- <template #avatar>
          <a-avatar
            :size="35"
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            alt="Han Solo"
          />
        </template> -->
        <template #content>
          <a-form-item>
            <a-textarea style="resize:none" :rows="4" v-model.trim="commenContent" />
          </a-form-item>
          <a-form-item>
            <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="commentSubmit"
            >发表评价</a-button>
          </a-form-item>
        </template>
      </a-comment>
      <Comment v-if="commentList.length > 0" :list="commentList" />
      <a-empty v-else>
        <template #description>
          <span>发表第一条评价吧!</span>
        </template>
      </a-empty>

      <Pagination :params="commentParams" :total="orgComTotal" @method="getCommentList" />
    </a-drawer>

    <a-modal
      class="course-modal"
      :visible="courseVisivle"
      title="课程详情"
      :zIndex="1001"
      @cancel="closeModal"
    >
      <a-card hoverable style="width: 151px">
        <template #cover>
          <ImageVue :cover="cmInfo.cover" :width="'150px'" />
        </template>
        <a-card-meta :title="cmInfo.name">
          <!-- <template #description>www.instagram.com</template> -->
        </a-card-meta>
      </a-card>
      <div v-if="cmInfo" class="content flex">
        <div class="price">
          <span>价格：</span>
          <span>￥{{ cmInfo.price }}</span>
        </div>
        <div style="flex-grow:1;font-size:16px;">课程简介：{{ cmInfo.intro }}</div>
        <div class="flex" style="justify-content:space-between;align-items:center;">
          <div v-if="cmInfo.lecturer" class="flex" style="align-items:center;">
            <span>讲师：</span>
            <span class="flex item">{{ cmInfo.lecturer.name }}</span>
          </div>
          <div v-if="cmInfo.createTime">发布：{{ cmInfo.createTime }}</div>
        </div>
      </div>
      <div class="operation">
        <img
          v-if="cmInfo.remark == 1"
          class="comment"
          @click="canCollect(1,cmInfo)"
          style="top:0;"
          src="@/assets/images/已收藏.png"
          alt
        />
        <img v-else @click="collect(1,cmInfo)" class="comment" style="top:0;" src="@/assets/images/收藏.png" alt />
        <img class="comment" src="@/assets/images/评价.png" @click="openDrawer(2,cmInfo.id)" alt />
      </div>
    </a-modal>
    <a-modal
      class="course-modal list-modal"
      width="550px"
      :visible="courseListVisivle"
      title="课程列表"
      @cancel="courseListVisivle = false"
    >
      <div v-for="item in cmList" :key="item.id" @click="getCourseById(item.id)">
        <a-card hoverable style="width: 151px">
          <template #cover>
            <ImageVue :cover="item.cover" :width="'150px'" />
          </template>
          <a-card-meta :title="item.name">
            <!-- <template #description>www.instagram.com</template> -->
          </a-card-meta>
        </a-card>
      </div>
    </a-modal>

    <a-modal class="lecMoa" :visible="locationModal" maskClosable @cancel="locationModal = false">
      <div class="list flex" style="box-shadow:none;border:none;padding:unset;">
        <!-- <ImageVue style="width:130px;" /> -->
        <ImageVue :cover="lecMoaInfo.cover" :width="'130px'" />
        <div class="center flex">
          <span>{{ lecMoaInfo.name }}</span>
          <span>简介：</span>

          <a-popover title="简介" :overlayStyle="{width:'300px','word-break':'break-all'}">
            <template #content>
              <p>{{ lecMoaInfo.intro }}</p>
            </template>
            <div class="jianjie">{{ lecMoaInfo.intro }}</div>
          </a-popover>
          <div class="flex" style="align-items:center;">
            <span>课程：</span>
            <template v-if="lecMoaInfo.courseList && lecMoaInfo.courseList.length > 0">
              <span
                class="flex item"
                @click="getCourseById(lecMoaInfo.courseList[0].id)"
              >{{ lecMoaInfo.courseList[0].name }}</span>
              <span
                v-if="lecMoaInfo.courseList.length > 1"
                @click="openCourseListModal(lecMoaInfo.courseList)"
                class="flex item"
              >更多</span>
            </template>
            <span v-else class="flex item">暂无授课</span>
          </div>
        </div>
        <div class="operation right">
          <img
            class="comment"
            src="@/assets/images/评价.png"
            @click="openDrawer(1,lecMoaInfo.id)"
            alt
          />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import {
  getCourse,
  getComment,
  getlecturer,
  submitComment,
  subCollect,
  getOrgById,
  getlecturerById,
  getCourseById,
  queryCollection,
  canCollect
} from '@/api/orgDetail'
import Comment from '../components/Comment.vue'
import ImageVue from '../components/image.vue'
import Pagination from '../components/Pagination.vue'
export default {
  components: { Comment, ImageVue, Pagination },
  data() {
    return {
      type: '',
      orgDetail: {}, //机构信息
      tabList: ['我们的课程', '我们的讲师'],
      actived: 0, // 当前激活的tabID
      commentList: [], //评论列表
      commentParams: { pageNum: 1, pageSize: 10 }, //获取评论列表的参数
      courseParams: { pageNum: 1, pageSize: 10 },
      lecturerParmas: { pageNum: 1, pageSize: 10 },
      cardList: [],
      lecturerList: [],
      orgComTotal: 0,
      lectureTotal: 0,
      visible: false,
      courseVisivle: false,
      courseListVisivle: false,
      drawerLoading: false,
      submitting: false,
      cmInfo: {},
      cmList: [],
      commenContent: '',
      orgId: '',
      locationModal: false,
      lecMoaInfo: {}
    }
  },
  created() {
    console.log(this.$route.query, 'query')
    this.orgId = this.$route.query.id
    if (this.$route.query.itemId) {
      let id = this.$route.query.itemId
      if (this.$route.query.type == 1) {
        this.getlecturerById(id)
        this.locationModal = true
      } else {
        this.getCourseById(id)
      }
    }
    this.getOrgById(this.orgId)
    console.log(this.orgDetail, 'afadf')
  },
  // async mounted() {},
  methods: {
    async canCollect(type, item,index) {
      let params = { type: type, collectId: item.id }
      let { code, msg, rows } = await queryCollection(params)
      // console.log(res);
      if (code == 200) {
        let collectId = rows[0].id
        let {code,msg} = await canCollect(collectId)
        if(code == 200){
          this.$message.info("取消收藏成功！")
          this.$nextTick(()=>{
            if(type == 0){
              this.$set(this.orgDetail,'remark','0')
            }else if(type == 1){
              this.$set(this.cmInfo,'remark','0')
            }else if(type == 2){
              this.$set(this.lecturerList[index],'remark','0')
            }
          })
        }
        
      }
    },
    async getOrgById(orgId) {
      let { code, data, msg } = await getOrgById(orgId)
      // console.log(res);
      if (code == 200) {
        this.orgDetail = data
        let str = this.orgDetail.type
        let str1 = this.orgDetail.id
        if (str == '0') {
          this.orgDetail.typeName = '研究生考试'
        } else if (str == '1') {
          this.orgDetail.typeName = '公务员考试'
        } else if (str == '2') {
          this.orgDetail.typeName = '驾考'
        } else if (str == '3') {
          this.orgDetail.typeName = '计算机考试'
        }
        this.lecturerParmas.orgId = str1
        this.getCourseList()
        this.getlecturerList(this.lecturerParmas)
      }
    },

    async getlecturerById(id) {
      let { code, data, msg } = await getlecturerById(id)
      if (code == 200) {
        this.lecMoaInfo = data
        let param = { pageNum: 1, pageSize: 10, teacherId: data.id }
        let { rows, code } = await getCourse(param)
        if (code == 200) {
          this.$set(this.lecMoaInfo, 'courseList', rows)
        }

        console.log(this.lecMoaInfo, 'lecMoaInfo')
      }
      // console.log(res,'getlecturerById')
    },
    async getCourseById(id) {
      let { code, data, msg } = await getCourseById(id)
      if (code == 200) {
        this.openCourseModal(data)
      }
    },

    async getCourseList() {
      const courseList = await getCourse(this.courseParams)
      console.log(courseList, 'course')
    },
    async getCommentList(params) {
      const { rows, code, msg, total } = await getComment(params)
      if (code == 200) {
        this.commentList = rows
        this.orgComTotal = total
        this.drawerLoading = false
      } else {
        this.drawerLoading = false
      }
    },
    async getlecturerList(params) {
      const { rows, code, total } = await getlecturer(params)
      if (code == 200) {
        this.lectureTotal = total
        this.lecturerList = rows
        this.lecturerList.forEach(async item => {
          let params = { ...this.lecturerParmas, teacherId: item.id }
          const { rows, code } = await getCourse(params)
          if (code == 200) {
            this.$set(item, 'courseList', rows)
          }
        })
      }
      console.log(this.lecturerList, 'jiangshi')
    },
    afterVisibleChange() {},
    pageChange(a, b) {
      this.commentParams.pageNum = a
      this.commentParams.pageSize = b
      this.getCommentList(this.commentParams)
    },
    openDrawer(type, id) {
      this.commenContent = ''
      this.drawerLoading = true
      this.commentList = []
      this.commentParams.relationId = id
      this.commentParams.type = type
      this.getCommentList(this.commentParams)
      this.visible = true
    },
    openCourseModal(course) {
      if (course.createTime) {
        course.createTime = course.createTime.split(' ')[0]
      }
      this.cmInfo = course

      // console.log(this.cmInfo)
      this.courseVisivle = true
    },
    openCourseListModal(list) {
      this.cmList = list
      this.courseListVisivle = true
    },
    async commentSubmit() {
      this.submitting = true
      if (this.commenContent == '') {
        message.info('不能发布空的评价哦！')
        this.submitting = false
      } else {
        let a = this.commentParams
        let params = {
          type: a.type,
          relationId: a.relationId,
          content: this.commenContent
        }
        const { msg, code } = await submitComment(params)
        if (code == 200) {
          this.commenContent = ''
          message.success(msg)
          this.getCommentList(this.commentParams)
          this.submitting = false
        } else {
          this.submitting = false
        }
      }
    },
    closeModal() {
      this.courseVisivle = false
      message.info('对我们的课程感兴趣的话，可以通过首页的联系方式联系我们哦！')
    },
    async collect(type, orgDetail,index) {
      let params = { type, collectId: orgDetail.id }
      const { code } = await subCollect(params)
      if (code == 200) {
        this.$message.success('收藏成功！可以移步右上角收藏中心查看！')
        this.$nextTick(() => {
          if(type == 0){
            this.$set(this.orgDetail, 'remark', "1")
          }else if(type == 1){
            this.$set(this.cmInfo, 'remark', "1")
          }else if(type == 2){
            this.$set(this.lecturerList[index],"remark","1")
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.operation {
  position: relative;
  // height: 100%;
  .comment {
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    width: 30px;
  }
}
.list {
  // float: left;
  // width: 48%;
  // margin: 15px;

  position: relative;
  padding: 10px 20px;
  border: 1px solid #e9edf0;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  .center {
    margin-left: 20px;
    flex-direction: column;
    .jianjie {
      flex-grow: 1;
      width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-line-clamp: 2;
      // /* autoprefixer: ignore next */
      // -webkit-box-orient: vertical;
      // word-wrap: break-word;
      // word-break: normal;
      // overflow: scroll;
    }
  }
  .right {
    height: 100%;
    position: absolute;
    bottom: 5px;
    right: 20px;
  }
}
.item {
  cursor: pointer;
  margin: 0 10px;
  justify-content: center;
  align-items: center;
  background-color: #aecce2;
  padding: 3px 5px;
  border-radius: 20px;
}
.org-info {
  // color: white !important;
  padding: 20px;
  justify-content: space-between;
  border-bottom: 1px solid #eaedf0;
  background: url('~@/assets/images/1.webp') no-repeat;
  background-size: 100% 100%;
  .info {
    margin-left: 30px;
    flex-direction: column;
    .top {
      align-items: center;
    }
    .name {
      font-size: 20px;
      font-weight: bold;
    }
    .intro {
      flex-grow: 1;
      font-size: 15px;
    }
    .type {
      margin: 0 12px;
      font-size: 12px;
      padding: 4px;
      border-radius: 3px;
      background: rgba($color: #cbd0d7, $alpha: 0.5);
    }
  }
}
.tab-card {
  .tab {
    li {
      font-size: 18px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      flex-grow: 1;
      border-bottom: 1px solid #999;
      cursor: pointer;
    }
    .actived {
      border: none;
      color: #fff;
      background: #005bca;
    }
  }
}
.list-box {
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
/deep/ .ant-drawer-wrapper-body {
  position: relative;
  .ant-drawer-body {
    height: 88%;
    overflow: scroll;
  }
}
/deep/ .ant-modal-footer {
  display: none;
}
.course-modal {
  /deep/.ant-modal-body {
    display: flex;
    .ant-card-body {
      padding: 15px;
      text-align: center;
    }
  }
  .content {
    position: relative;
    margin-left: 20px;
    padding-right: 40px;
    flex-grow: 1;
    flex-direction: column;
    .price {
      font-size: 20px;
      font-weight: 600;
    }
  }
}
.list-modal {
  /deep/ .ant-modal-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
  }
}
.lecMoa {
  :deep .ant-modal {
    top: 50%;
    transform: translateY(-50%);
  }
  :deep .ant-modal-body {
    // padding: 0;
    word-wrap: unset !important;
  }
}
</style>